<template>
	<div class="section partyBg" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style=" 'height:' +sectionHeight + 'px;' ">

		<el-row :gutter="24" type="flex" class="partyTitleArea">
			<el-col :xs="20" :sm="20" :md="20" :lg="21" :xl="22" class="newsTitle">
				<div class="title_cn">党建资讯</div>
				<div class="title_en">partybuilding information</div>
			</el-col>
			<el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="2" class="newsDetile">
				<div class="detileBtn" @click="goToPartyNewsListPage()">{{$t("more")}} <i
						class="el-icon-d-arrow-right"></i></div>
			</el-col>
		</el-row>

		<div class="partyContentArea">
			<el-row :gutter="10" class="partyContentRow">
				<el-col class="partyCard">
					<el-card :body-style="{ padding: '0px' }" shadow="always">
						<div>
							<div>
								<el-image :lazy="true" class="img" :src="partyInfo.fileUrl">
								</el-image>
							</div>
							<div>
								<div class="partyTitle">{{partyInfo.title}}</div>
								<div class="partyContent" v-html="$request.formartContent(partyInfo.content)"></div>
								<div class="partyMoreBtnArea" @click="goToPartyNewsDetail(partyInfo.id)">
									<div class="partyMoreBtn">
										{{$t("moreDetails")}}
									</div>
								</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import { forEach } from '../../utils/tools';
	export default {
		name: 'Infomation',
		props: {
			sectionHeight: Number
		},
		components: {},
		created() {
			this.bindPartyInfo();
		},
		mounted() {

			// this.getMenuList();
		},
		data() {
			return {
				fit: 'scale-down',
				partyInfo: [],
				data: {
					content: []
				},
				partyData: [],
				dataIndex: 0,
				partyInterval: null
			}
		},
		methods: {


			/**
			 * 绑定首页-(3)3、党建资讯
			 */
			bindPartyInfo() {
				let params = {};
				let that = this;
				that.partyData =[];
				that.$request.getPartyInfo(params).then(res => {
					that.partyInfo = res.data[0][0];
			 
					for(let item of res.data){
					that.partyData=	that.partyData.concat(item)
					}
					//that.partyData = res.data[0];
					that.partyInterval = null;
					that.setPartyInfo();
				}).catch((error) => {
					console.log(error);
				});
			},
			setPartyInfo() {
				let that = this;
				that.partyInterval = setInterval(function() {
					if (that.dataIndex < that.partyData.length-1) {
						that.dataIndex++;
					} else {
						that.dataIndex = 0;
					}
					
					that.partyInfo = that.partyData[that.dataIndex];
				}, 3000)
			},
			initBannerSwiper() {
				let that = this;
				that.swiper = new Swiper(that.$refs.newsSwiper, {

					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,
					effect: 'slide',
					lazy: {
						loadPrevNext: true,
					},
					pagination: {
						el: that.$refs.newsSwiperPagination,
						type: 'bullets',
						clickable: true
					},
					autoplay: {
						delay: 4000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},

				});
				that.swiper.on('slideNextTransitionStart', function() {
					var activeIndex = that.swiper.activeIndex;


					console.log("开始切换" + activeIndex);
				});
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {
				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
			},
			//////跳转列表页
			goToPartyNewsListPage() {
				this.$router.push({
					name: this.$t("partyBuildingInNewsList"),
				});
			},
			//////跳转详情页面
			goToPartyNewsDetail(id) {
				this.$router.push({
					name: this.$t("partyBuildingInNewsDetail"),
					query: {
						id: id,
					}
				});
			},
		},
		beforeDestroy() {

		},
		watch: {

		}
	};
</script>

<style scoped>
	/* 企业实时新闻 */
	.partyBg {
		width: 100%;
		height: 100%;
		background: url("../../assets/img/bg_home_dangjian.jpg") no-repeat;
		background-size: cover;
		background-position: center;
		cursor: pointer;
		padding-top: 0px;
	}

	.partyTitleArea {
		width: 90%;
		height: 50px;
	}

	.partyTitleArea .newsTitle {
		display: flex;
		flex-direction: column;
	}

	.partyTitleArea .title_cn {
		font-size: 18px;
		font-weight: bold;
		border-left: 4px solid #0484D7;
		padding-left: 10px;
		height: 20px;
		line-height: 20px;
	}

	.partyTitleArea .title_en {
		font-size: 12px;
		font-style: italic;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
	}

	.partyTitleArea .newsDetile {
		justify-content: center;
		text-align: center;
		position: relative;
	}

	.partyMoreBtnArea {
		height: 60px;
		width: 100%;
		position: relative;
	}

	.partyMoreBtnArea .partyMoreBtn {
		height: 30px;
		line-height: 30px;
		width: 80px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 12px;
		position: absolute;
		/* 居中显示 */
		left: 50%;
		transform: translateX(-50%);
		bottom: calc((7vh - 30px)/2);
	}

	.partyMoreBtnArea .partyMoreBtn:hover {
		background: #FF7200;
	}

	.partyTitleArea .detileBtn {
		height: 30px;
		line-height: 30px;
		width: 80px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 12px;
		/* margin-top: 10px; */
		position: absolute;
		right: 0px;
		top: 10px;
	}

	.partyTitleArea .detileBtn:hover {
		background: #FF7200;
	}

	.partyContentArea {
		/* border: 1px solid red; */
		width: 90%;
		height: max-content;
		display: flex;
		flex-direction: column;
		transition: transform 1s ease;
	}

	.partyCard {
		transition: transform 0.2s ease;
	}

	.partyCard:hover {
		transform: scale(0.98)
	}

	.partyInfoArea {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.partyInfoTitle {
		height: 3vh;
		font-size: 1.2em;
		color: #0484D7;
	}

	.partyInfoContent {
		height: 4vh;
		font-size: 1em;
		font-weight: 400;
		color: #8D9DA8;
	}

	.partyInfoDate {
		height: 3vh;
		line-height: 3vh;
		font-size: 1em;
		font-weight: 400;
		color: #8D9DA8;
	}

	.partyInfoDetailBtn {
		height: 3vh;
		position: relative;
	}

	.partyInfoDetailBtn .detileBtn {
		width: 90px;
		height: 30px;
		line-height: 30px;
		background: #0484D7;
		border-radius: 14px;
		color: #FFF;
		text-align: center;
		font-size: 0.9em;
		position: absolute;
		right: 0px;
		bottom: 10px;
	}

	.partyInfoDetailBtn .detileBtn:hover {
		background: #FF7200;
	}

	.img {
		width: 100%;
		height: 30vh;
		cursor: pointer;
		border-radius: 4px;

	}

	.partyTitle {
		height: 40px;
		line-height: 40px;
		align-items: center;
		text-align: center;
		font-size: 16px;
		color: #000;
		font-weight: 530;
		padding: 0px 10px;
		background-color: #f8f8f8;
		border-radius: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.partyContent {
		text-indent: 2em;
		height: 90px;
		line-height: 29px;
		padding: 10px 20px 0px 20px;
		font-size: 12px;
		color: #a6a6a6;
		/* 显示省略号 */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.partyCard:hover .partyTitle {
		color: #0484D7;
	}

	.caretLeft {
		height: 50px;
		width: 50px;
		font-size: 62px;
		color: #FFF;
		position: absolute;
		right: -12px;
		text-align: right;
		top: calc((40vh - 55px)/2);
	}

	.caretRtight {
		height: 50px;
		width: 50px;
		font-size: 62px;
		color: #FFF;
		position: absolute;
		left: -24px;
		text-align: right;
		top: calc((40vh - 55px)/2);
	}

	@media (max-width: 992px) {

		.caretLeft,
		.caretRtight {
			display: none;
		}
	}
</style>
